<template>
 
    <section id='app2' class="todoapp">
      <myhead 
      v-on:addTodaData="addTodaData"

      />
      <selection 
      :todoData="todoData" 
      v-on:updateTodo="updateTodo"
      v-on:updateTodoData="updateTodoData"
      :filterText="filterText"
      v-on:removeData="removeData"
      @toggleAll="toggleAll"
      />

      <myfoot 
      :todoData="todoData" 
      v-on:addTodaData="addTodaData"
      :filterText="filterText"
      />


      <!-- This section should be hidden by default and shown when there are todos -->
    </section>
</template>

<script>
import selection from './components/myselection.vue'
import myfoot from './components/myfooter.vue'
import myhead from './components/myhead.vue'

// import head from '../component/head.vue'
let data = [
  {id:1,title:'写代码',completed:false}
]
  export default {
    data(){
      return {
        todoData: data,
        filterText: ''
      }
    },
    methods:{
      addTodaData(value){
        const tempData = {}
        tempData.id = new Date().getTime()
        tempData.title = value
        tempData.completed = false
        this.todoData.push(tempData)

      },
      updateTodoData (id) {
        let tempIndex = null
        this.todoData.filter(function (item,index) {
          if (item.id === id) {
            tempIndex = index
            return true
          }
          return false
        })
        if(tempIndex){
          const tempFlag = this.todoData[tempIndex].completed
          this.todoData[tempIndex].completed = !tempFlag
        }
      },
      removeData (target) {
        console.log(target)
        let targetIndex = ''
        this.todoData.forEach(function (item,index) {
          if( item === target){
            targetIndex = index

          }

        })
        console.log(targetIndex)

        if(targetIndex || targetIndex === 0){
          this.todoData.splice(targetIndex,1)
        }
      },
      updateTodo(target,value){
        this.todoData.forEach(function (item){
          if(target === item){
            item.title = value
          }
        })

      },
      toggleAll(value){
        this.todoData.forEach( function (item) {
          item.completed = value
        })

      }
      
    },
    components:{
      selection,
      myfoot,
      myhead
    },
    created(){
      window.temp = this
    }
  }

</script>